<template>
  <!-- :title="{ add: '新增部门', edit: '编辑部门' }[mode]" -->
  <el-dialog
    :title="title"
    width="600px"
    :visible.sync="isShow"
    @close="closeEvent"
  >
    <!-- 表单
         el-form
            label-width="标题宽度"
            el-form-item  label:标题
                表单元素
        基本表单验证
        1：el-form
               model:整 个表单的数据
               rules:规则
        2：el-form-item
               prop：需要验证项的字段名

          rules：{
            prop的值:[
            {required:true,message:'错误信息',trigger:'change/blur'},
            {min:最小长度,max:最大长度,message:'错误信息',trigger:'change/blur'},
            {validator:(rule,value,callback)=>{
              value:当前项的值
              callback:
                 callback():验证通过
                 callback(new Error('错误信息')):验证不通过
            }}
            ]
          }
        全局表单验证
        el-form ref="form"
        this.$refs.form.validate((result)=>{
          result:true:通过  false:失败
        })

       -->
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model.trim="form.name" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model.trim="form.code" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <!-- el-select
                  属性：v-model:值的双向绑定
                el-option
                  属性：
                      label:显示的文本
                      value:选中该项后的值

         select列表渲染
         1：api定义
         2：导入api
         3:调用api(点击select选项时调用)
         4：渲染
         -->
        <el-select v-model="form.manager" @focus="getUserList">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="form.introduce" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align: center">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import {
  sysUserSimple,
  companyDepartmentPost,
  companyDepartmentPut
} from '@/api/departments'
// Object(...)
export default {
  props: {
    initTreeData: {
      type: Array,
      default: () => [] // 基本数据（number,string,boolean,null,undefined）类型直接写，复杂数据(Object,Array,function)类型()=>{return 复杂数据类型}
    }
  },
  data() {
    return {
      isShow: false, // 是否显示弹框组件
      selectValue: '',
      userList: [], // 用户列表
      mode: '', // add:新增  edit:编辑
      // 新增，编辑，草稿，编辑草稿，模板，编辑模板
      form: {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	string	非必须		父级部门ID
      },
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'change' },
          {
            // 找出自己当前添加节点的兄弟项
            //  兄弟节点的pid一定相同，一定是自己父级的id
            // 如果能拿到所有节点数据且有pid的值轻松可以找出来
            // 1：所有节点数据(树形转换前)   2：拿到节点的pid(点击项数据的id)
            // 验证不可同名（和自己当前输入的name的值作比较）
            validator: (rule, value, callback) => {
              // if (this.mode === 'add') {
              //   // 1:找出点击项的所有子项（当前添加项的兄弟项）
              //   const newArr = this.initTreeData.filter(
              //     (item) => item.pid === this.form.pid
              //   )
              //   // 2：判断是否重名
              //   // [{name:1},{name:2}]    2
              //   // 返回值（boolean）=数组.some/数组.every
              //   // 数组.some:只要数据中有一个项满足条件（return的值为true）,它的返回值就是true
              //   // 数组.every,所有项都满足条件（return的值为true）,它的返回值就是true
              //   const bol = newArr.some((item) => {
              //     return item.name === value
              //   })
              //   // bol：true表示有重名
              //   bol ? callback(new Error('请不要输入重名的name')) : callback()
              // } else if (this.mode === 'edit') {
              //   // 1:找出点击项的同级部门（点击项的pid相同）2:验证不能重名（排除自己）
              //   const newArr = this.initTreeData.filter((item) => {
              //     return item.pid === this.form.pid
              //   })
              //   const bol = newArr.some((item) => {
              //     return item.name === value && item.id != this.form.id
              //   })
              //   bol ? callback(new Error('请不要输入重名的name')) : callback()
              // }
              const newArr = this.initTreeData.filter(
                (item) => item.pid === this.form.pid
              )
              const bol = newArr.some((item) => {
                if (this.mode === 'add') {
                  return item.name === value
                } else if (this.mode === 'edit') {
                  return item.name === value && item.id !== this.form.id
                }
              })
              bol ? callback(new Error('请不要输入重名的name')) : callback()
            },
            trigger: 'change'
          }
        ], //	string	非必须		部门名称
        code: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (this.mode === 'add') {
                const bol = this.initTreeData.every((item) => {
                  return item.code !== value
                })
                // bol：true表示有重名
                bol ? callback() : callback(new Error('请不要输入重名的code'))
              } else if (this.mode === 'edit') {
                // arr=[{id:1,code:'a'},{id:2,code:'b'}]  id:2  code:b
                // const bol = this.initTreeData.every((item) => {
                //   return item.code != value || item.id === this.form.id
                // })
                const bol = this.initTreeData.some((item) => {
                  return item.code === value && item.id !== this.form.id
                })
                // bol：true表示有重名
                bol ? callback(new Error('请不要输入重名的code')) : callback()
              }
            },
            trigger: 'change'
          }
        ], //	string	非必须		部门编码，同级部门不可重复
        manager: [{ required: true, message: '必填', trigger: 'change' }] //	string	非必须		负责人名称
        // introduce: [{ required: true, message: '必填', trigger: 'change' }] //	string	非必须		介绍
      }
    }
  },
  computed: {
    title() {
      const obj = {
        add: '新增部门',
        edit: '编辑部门'
      }
      return obj[this.mode]
    }
  },
  // watch: {
  //   isShow: {
  //     handler(newVal) {
  //       if (!newVal) {
  //         // 重置表单并移除校验结果
  //         this.$refs.form.resetFields()
  //       }
  //     }
  //   }
  // },
  mounted() {
    // console.log(this.$bus)
    // 监听兄弟组件传值
    this.$bus.$on('toAdd', (bol, id, mode, itemInfo) => {
      this.isShow = bol
      // 接收点击项的id值用于子项的pid
      this.form.pid = id
      this.mode = mode
      // 只有编辑时数据回显
      if (mode === 'edit') {
        this.form = JSON.parse(JSON.stringify(itemInfo))
        // 数据内有function  undefind   递归处理（百度大把人写好了）
      }
    })
  },
  beforeDestroy() {
    // 销毁兄弟传值的监听
    this.$bus.$off('toAdd')
  },
  methods: {
    // 每次关闭时都触发
    closeEvent() {
      // 重置表单数据为初始值，并移除表单校验
      // 初始值：form表单初次渲染时的值，第一次打开弹框时form表单的值
      this.$refs.form.resetFields()
      this.form = {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	string	非必须		父级部门ID
      }
    },
    // 获取用户列表
    async getUserList() {
      if (this.userList.length === 0) {
        const res = await sysUserSimple()
        this.userList = res.data
        console.log('用户列表', res)
      }
    },
    // 确定点击事件
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          if (this.mode === 'add') {
            await companyDepartmentPost(this.form)
            // this.form = {
            //   name: '', //	string	非必须		部门名称
            //   code: '', //	string	非必须		部门编码，同级部门不可重复
            //   manager: '', //	string	非必须		负责人名称
            //   introduce: '', //	string	非必须		介绍
            //   pid: '' //	string	非必须		父级部门ID
            // }
            // this.$nextTick(() => {
            //   this.$refs.form.clearValidate()
            // })
            // 提示
            this.$message.success('添加成功')
          } else if (this.mode === 'edit') {
            await companyDepartmentPut(this.form)
            // 提示
            this.$message.success('编辑成功')
          }
          // 关闭弹框
          this.isShow = false
          // 刷新父级列表数据
          this.$emit('getData')
        }
      })
    }
  }
}
</script>
<style></style>
